<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../jquery-3.3.1.min.js"></script>
    <style>
        li{
            width: 600px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #999;
            line-height: 10px;
        }
    </style>
    <script>
        
        $(function(){
            // ID 选择器
            // $('#list').css('border', '5px solid red');
            // $('#list').css('background-color', '#abcdef');
            // tagName 标签选择器
            // $('h1').css('border', '5px solid red');
            // $('li').css('border', '5px solid red');
            

            // $('#list li').css('border', '5px solid red');
            // $('#list>li').css('border', '5px solid red');
            // $('.item+li').css('border', '5px solid red');
            // $('.item~li').css('border', '5px solid red');
            
            // :first
            // $('#list li:first').css('border', '5px solid red');
            // $('#list li:eq(1)').css('border', '5px solid red');
            // $('#list li:eq(2)').css('border', '5px solid red');
            // $('#list li:eq(3)').css('border', '5px solid red');
            // $('#list li:eq(9)').css('border', '5px solid red');
            

            // $("li:contains('沙')").css('border', '5px solid red');
            // 包含有
            // $("#list li:has('.item')").css('border', '5px solid red');
            
            // $('#imglist img[width]').css('border', '5px solid red');
            // $('#imglist img[width="200"]').css('border', '5px solid red');
            // $('#imglist img[width!="200"]').css('border', '5px solid red');
            // $('#imglist img[alt^="t"]').css('border', '5px solid red');
            // $('#imglist img[title$="1"]').css('border', '5px solid red');
            // $('#imglist img[title*="i"]').css('border', '5px solid red');
            $('img[src][width=200][alt^="t"][title^="p"]').css('border', '5px solid red');
        });
    </script>
</head>
<body>
    <h1 title="h1111">jQuery 选择器</h1>
    <hr>
    <div id="imglist">
        <img src="../imgs/1.jpg" alt="t1" width="201" height="300" title="pic1">
        <img src="../imgs/2.jpg" alt="t2" width="200" height="300" title="pic2">
        <img src="../imgs/3.jpg" width="200" height="300" title="img1">
        <img src="../imgs/4.jpg" alt="t4" width="200" height="300" title="img2">
        <img src="../imgs/5.jpg" alt="t5" width="205" height="300" title="tu1">
    </div>

    <img src="../imgs/5.jpg" alt="t6" width="200" height="300" title="tu2">


    <ul id="list">
        <li>小晴晴 和我 去钓鱼</li>
        <li>小艳艳 和我 去约跑</li>
        <li>
            小沙沙 和我 去看电影
            <ul>
                <li>小晴晴 和我 去钓鱼</li>
                <li>小艳艳 和我 去约跑</li>
                <li>小沙沙 和我 去看电影</li>
                <p>我不是小静静</p>
                <li class="item">小静静1 和我 去沙滩</li>
                <li>小静静2 和我 去隔壁</li>
                <li>小静静3 和我 去晒太阳</li>
            </ul>
        </li>
        <li class="item">小静静1 和我 去沙滩</li>
        <li>小静静2 和我 去隔壁</li>
        <li>小静静3 和我 去晒太阳</li>
    </ul>

    <hr>
    <ul>
        <li>小晴晴 和我 去钓鱼</li>
        <li>小艳艳 和我 去约跑</li>
        <li>
            小沙沙 和我 去看电影
            <ul>
                <li>小晴晴 和我 去钓鱼</li>
                <li>小艳艳 和我 去约跑</li>
                <li>小沙沙 和我 去看电影</li>
                <p>我不是小静静</p>
                <li>小静静1 和我 去沙滩</li>
                <li>小静静2 和我 去隔壁</li>
                <li>小静静3 和我 去晒太阳</li>
            </ul>
        </li>
        <li>小静静1 和我 去沙滩</li>
        <li>小静静2 和我 去隔壁</li>
        <li>
            小静静3 和我 去晒太阳
            <ul>
                <li>小晴晴 和我 去钓鱼</li>
                <li>小艳艳 和我 去约跑</li>
                <li>小沙沙 和我 去看电影</li>
                <p>我不是小静静</p>
                <li>小静静1 和我 去沙滩</li>
                <li>小静静2 和我 去隔壁</li>
                <li>小静静3 和我 去晒太阳</li>
            </ul>
        </li>
    </ul>

    <hr>
    <ul>
        <li>小晴晴 和我 去钓鱼</li>
        <li>小艳艳 和我 去约跑</li>
        <li>小沙沙 和我 去看电影</li>
        <p>我不是小静静</p>
        <li>小静静1 和我 去沙滩</li>
        <li>小静静2 和我 去隔壁</li>
        <li>小静静3 和我 去晒太阳</li>
    </ul>
</body>
</html>